<template>
  <Modal v-model="modal" :title="title" width='1000' class="tranfer-freight">
    <div class="row ">
      <p class="label">省</p>
      <Select  v-model="form.provinceId" @on-change="onChangeProvince" :disabled="disabled">
        <Option v-for="(item, index) in addressData" :key="index" :value="item.id">{{item.value}}</Option>
      </Select>
      <p class="label">市</p>     
      <Select   v-model="form.cityId" @on-change="onChangeCity" v-show="cityData.length" :disabled="disabled">
        <Option v-for="(item, index) in cityData" :key="index" :value="item.id">{{item.value}}</Option>
      </Select>
      <p class="label" v-show="areaData.length">区</p>
      <Select  v-model="form.areaId" v-if="areaData.length" :disabled="disabled">
        <Option v-for="(item, index) in areaData" :key="index" :value="item.id">{{item.value}}</Option>
      </Select>
      <Button type="primary" size="middle" class="ml" @click="onGetDistirbutor(true)" :disabled="disabled">加载经销商</Button>
  </div>
    <div class="tranfer-box">
        <div class="left-info">
          <div class="tab">
            <Checkbox :disabled="disabled" v-model="isAll" @on-change="onChangeAllSelect">全选</Checkbox>
            <p>当前经销商</p>
            <!-- <Checkbox v-model="form.allDistributor">所有经销商</Checkbox> -->
          </div>
          <div class="content">
            <ul>
              <template v-for="(item, index) in distribList">
                <li :key="index" class="checkbox">
                  <label :for="'checkbox'+index" :de="item.status">
                    <input class="madanText" :disabled="disabled"  @change="onJoinSelectData(index, item, $event)" :id="'checkbox'+index" type="checkbox" v-model="item.status" :value="item.value">
                    <span></span>
                    {{item.distributorName}}
                  </label>
                </li>
              </template>
            </ul>
          </div>
          <div class="footer pager">
            <Page 
              :total="list.totalItem" 
              :current="list.currentPage"
              :page-size="list.pageSize"
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange"
              placement="top"></Page>
          </div>
        </div>
        <div class="right-info">
          <div class="tab">
            <p>已选经销商</p>
            <div class="cancel-info" @click="onCancel">全部取消</div>
          </div>
          <div class="content">
            <ul>
              <li v-for="(item, index) in distribListed" :key="index" class="checkbox">
                <label :for="'checkboxed' + index">
                  <input class="madanText1" :disabled="disabled" @change="deleteSelectData(index, item, $event)"  :id="'checkboxed'+index" :text="item.status"  type="checkbox" v-model="item.status" :value="item.value">
                  <span></span>
                  {{item.distributorName}}
                </label>
              </li>
            </ul>
          </div>
        </div>
        <div :class="{'load-disable': disabled}"></div>
    </div>
    <div slot="footer">
        <Button @click="modal = false" size="large" type="text" >取消</Button>
        <Button @click="onSave"  type="primary" size="large" >确认</Button>
    </div>
  </Modal>
</template>
<script>
// import listData from './transferItemData'
import { mapGetters } from 'vuex'
export default {
  props: {
    param: '',
    disabled: ''
  },
  data() {
    return {
      isAll: false,
      selectList: [],
      // list: listData.list,
      modal: false,
      distribList: [],
      distribListed: [],
      index: '0',
      type: '0',
      list: {
        totalItem: 0,
        currentPage: 1,
        pageSize: 20
      },
      province: '',
      city: '',
      area: '',
      // addressData: '',
      // cityData: '',
      // areaData: '',
      form: {
        provinceId: '',
        cityId: '',
        areaId: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    onPageChange(number) {
       this.list.currentPage = number;
       this.editDistr()
    },
    onSave() {
      this.modal = false
      this.$emit('complete', {index: this.index, data: this.distribListed, type: this.type})
    },
    editDistr(list, index, type) {
      this.modal = true
      this.getDistribute().then(res => {{
        if (list) {
          this.index = index
          this.type = type
          this.distribListed = list.map(item => {
            return {
              id: item.distributorId,
              distributorName: item.distributorName,
              status: true
            }
          })
        }
        if (this.distribListed) {
          for(let j = 0; j < this.distribListed.length; j++) {
            for(let i = 0; i < this.distribList.length; i++) {
              if (this.distribList[i].id == this.distribListed[j].id){
                this.distribList.splice(i, 1)
              }
            }
          }
        }
      }})
    },
    getDistribute() {
      let param = {
        current: this.list.currentPage,
        provinceId: this.form.provinceId == 0 ? '' : this.form.provinceId, 
        cityId: this.form.cityId == 0 ? '' : this.form.cityId,
        areaId: this.form.areaId == 0 ? '' : this.form.areaId
      }
      return new Promise(resolve => {
        this.$ajaxGet('/freight/setting/distributorPage', param).then(res => {
          this.list.totalItem = res.total
          this.isAll = false
          this.distribList = res.records.map(item => {
            return {
              distributorName: item.distributorName,
              id: item.distributorId
            }
          })
          resolve(this.distribList)
        })
      })
    },
    deleteSelectData(index, item, e) {
      e.target.checked = true
      this.distribListed.splice(index, 1)
      this.distribList.unshift(item)
    },
    onJoinSelectData(index, item, e) {
      e.target.checked = false
      this.distribList.splice(index, 1)
      this.distribListed.push(item)
    },
    onChangeAllSelect() {
      document.querySelectorAll('.madanText1').forEach(item => {
        item.checked = true
      })
      if (!this.distribList.length) return
      this.distribListed.push(...JSON.parse(JSON.stringify(this.distribList)))
      this.distribListed.forEach(item => {
        item.status = true
      })
      this.distribList = []
    },
    onCancel() {
      if (this.disabled) return
      this.isAll = false
      if (!this.distribListed.length) return
      this.distribList.push(...JSON.parse(JSON.stringify(this.distribListed)))
      this.distribList.forEach(item => {
        item.status = false
      })
      this.distribListed = []
    },
    async  ajaxAddress(param) {
      return new Promise((resolve, reject) =>{
        this.$ajaxGet('/tiger/area/list_by_parentId', param && { parentId: param.value }).then(data => {
          this.setAddress({data: data, param: param})
          resolve(this[param.type][0].id) 
        }).catch(data => {
          reject(data)
        })
      })
    },
    setAddress(object) {
      if(object.param.type == 'area' &&  !object.param.value) {
        return 
      }
      this[object.param.type] = object.data.map(item=> {
        return {
          id: item.id,
          value: item.name
        }
      })
      this[object.param.type].unshift({
        value: '请选择',
        id: 0
      })
    },
    init() {
      let that = this
      this.ajaxAddress({type: 'province'}).then(idProvince =>{
        if (this.id) {
          that.form.provinceId = idProvince
          idProvince && that.ajaxAddress({value: idProvince, type: 'city'}).then(idCity => {
            that.form.cityId = idCity
            idCity && this.ajaxAddress({value: idCity, type: 'area'}).then(idArea => {
              that.form.areaId = idArea
            })
          })
        }
      })
    },
    onGetDistirbutor(data) {
      if (!data) {
        this.form.provinceId = ''
        this.form.cityId = ''
        this.form.areaId = ''
      }
      let param = {
        provinceId: this.form.provinceId == 0 ? '' : this.form.provinceId, 
        cityId: this.form.cityId == 0 ? '' : this.form.cityId,
        areaId: this.form.areaId == 0 ? '' : this.form.areaId
      }
      param.isSearch = data
      this.editDistr()
    },
    onChangeProvince(id) {
      let that = this
      if(id == 0) {
        this.form.cityId = ''
        this.form.areaId = ''
        this.setCityEmpty()
        this.setAreaEmpty()
      }
      id && this.ajaxAddress({value: id, type: 'city'}).then(idCity => {
        this.form.cityId = idCity
        this.setAreaEmpty()
        this.form.areaId = ''
        idCity && this.ajaxAddress({value: idCity, type: 'area'}).then(idArea => {
          this.form.areaId = idArea
        })
      })
    },
    onChangeCity(id) {
      let that = this
      if (id == 0) {
        this.setAreaEmpty()
      }
      id && this.ajaxAddress({value: id, type: 'area'}).then(idArea => {
        this.form.areaId = idArea
      })
    },    
    setCityEmpty() {
      this.city = []
    },
    setAreaEmpty() {
      this.area = []
    }
  },
  computed: {
    // ...mapGetters([
    //   'bargainNoSelected',
    //   'allDistributor',
    //   'bargainDisribuType'
    // ]),
    addressData() {
      return this.province
    },
    cityData() {
      return this.city
    },
    areaData() {
      return this.area
    }
  }
}
</script>

